<template>
    <el-menu router active-text-color="rgb(64, 158, 255)" background-color="#304156" class="el-menu-vertical-demo"
        :default-active="route.path" unique-opened text-color="#fff">
        <el-menu-item index="/home">
            <i class="iconfont homepage"></i>
            首页
        </el-menu-item>
        <!-- el-sub-menu 是一级菜单 -->
        <el-sub-menu :index="parent.name" v-for="parent in menus" :key="parent.id">
            <template #title>
                <i class="iconfont" :class="parent.icon"></i>
                <span>{{ parent.title }}</span>
            </template>
            <!-- el-menu-item 是二级菜单 -->
            <el-menu-item :index="`/${parent.name}/${child.name}`" v-for="child in parent.children" :key="child.id">
                <i class="iconfont" :class="child.icon"></i>
                {{ child.title }}
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/userStore';
import { generateMenu } from '@/utils';
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute();

const userStore = useUserStore();
// console.log(userStore.routesList);
// function generateMenu(data, parentId = 0) {
//     const menu = [];

//     for (let i = 0; i < data.length; i++) {
//         const node = data[i];

//         if (node.parentId == parentId && node.hidden == 0) {
//             const newNode = { id: node.id, title: node.title };
//             const children = generateMenu(data, node.id);
//             if (children.length > 0) {
//                 newNode.children = children;
//             }
//             menu.push(newNode);
//         }
//     }

//     return menu;
// }
// setTimeout(() => {
//     let result = generateMenu(userStore.routesList)
//     console.log(result)
// }, 1000);



// 全局数据在热更新的时候比较容易出现一些数据残留的问题，所以以后发现全局数据出现问题，记得流程从头走
let menus = computed(() => {
    let list = generateMenu(userStore.routesList);
    list.forEach(parent => {
        parent.children = parent.children?.filter(item => item.hidden === 0)
    })
    return list;
})


</script>

<style scoped lang="less">
// vue3里面如果要修改第三方样式，采用的是  :deep()
:deep(.is-active.el-menu-item) {
    .iconfont {
        color: rgb(64, 158, 255) !important;
    }
}
</style>